<template>
  <div class="table-list">
    <header class="table-list-header">
      <TitleText :title="`${titlePrefix}${currParent.mc ? ` - ${currParent.mc}` : ''}`" />
      <el-button type="primary" :icon="Plus" plain @click="onIssued">下发</el-button>
    </header>
    <el-form class="table-list-search" :model="tableSearch" label-suffix=": ">
      <el-form-item label="分组名称" prop="fzmc">
        <el-input v-model="tableSearch.fzmc" clearable placeholder="请输入分组名称" />
      </el-form-item>
      <el-form-item label="下发单位" prop="xfdw">
        <el-select v-model="tableSearch.xfdw" placeholder="请选择下发单位" clearable>
          <el-option v-for="item in PCS_MAP" :key="item.code" :label="item.name" :value="item.code" />
        </el-select>
      </el-form-item>
      <el-form-item label="任务状态" prop="zt">
        <el-select v-model="tableSearch.zt" clearable placeholder="请选择状态">
          <el-option v-for="item, index in DUTY_ISSUED_PLAN_STATUS_OPTIONS" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <section class="table-list-table">
      <el-table :data="tableData">
        <template #empty>
          <Empty tableEmpty />
        </template>
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="fzmc" label="分组名称" min-width="150" />
        <el-table-column prop="rs" label="任务人数" min-width="150">
          <template #default="{ row }">
            <el-input-number v-if="row.isEdit" v-model="row.rs" :min="1">
              <template #suffix>人</template>
            </el-input-number>
            <span v-else>{{ row.rs }}人</span>
          </template>
        </el-table-column>
        <el-table-column prop="zt" label="任务状态" min-width="100">
          <template #default="{ row }">
            <el-tag v-if="row.zt == DUTY_ISSUED_PLAN_STATUS['已上报']" type="success">已上报</el-tag>
            <el-tag v-else-if="row.zt == DUTY_ISSUED_PLAN_STATUS['进行中']" type="primary">进行中</el-tag>
            <el-tag v-else type="danger">状态异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="xfr" label="下发人" min-width="120" />
        <el-table-column prop="xfdw" label="下发单位" min-width="120" />
        <el-table-column prop="xfsj" label="下发时间" min-width="160" />
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="{ row }">
            <el-button v-if="isNotReport(row)" link type="primary" @click="onReport(row)">上报</el-button>
            <el-button v-if="row.isEdit" link type="primary" @click="onSave(row)">保存</el-button>
            <el-button v-else link type="primary" @click="onEdit(row)">编辑</el-button>
            <el-popconfirm v-if="isDutyIssued && isNotReport(row)" title="确认删除吗？" @confirm="onDelete(row)">
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="table-list-table-pagination"
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        background
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </section>
    <IssuedFormDialog ref="issuedFormDialogRef" :name="currParent.mc" @submited="onSearch(false)" />
    <ReportFormDialog ref="reportFormDialogRef" :name="currParent.mc" @submited="onSearch(false)" />
  </div>
</template>

<script setup>
import { ref, reactive, useTemplateRef, watch, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { issuedApi } from '@/api/DutyManage'
import { PCS_MAP } from '@/config'
import { DUTY_ISSUED_PLAN_STATUS, DUTY_ISSUED_PLAN_STATUS_OPTIONS } from '@/views/DutyManage/config'
import IssuedFormDialog from './IssuedFormDialog.vue'
import ReportFormDialog from './ReportFormDialog.vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  titlePrefix: {
    type: String,
    required: true
  }
})

const issuedFormDialogRef = useTemplateRef('issuedFormDialogRef');
const reportFormDialogRef = useTemplateRef('reportFormDialogRef');

const isDutyIssued = computed(() => props.titlePrefix === '任务下发')
const isNotReport = computed(() => row => row.zt == DUTY_ISSUED_PLAN_STATUS['进行中'])
const currParent = reactive({});
const tableSearch = reactive({});
const tableData = reactive([]);
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

watch(() => props.titlePrefix, value => {
  if (value != '任务上报') return;
  onSearch();
  Object.assign(currParent, { mc: '' });
})

const onIssued = () => {
  issuedFormDialogRef.value.show('add');
}

const onReport = row => {
  reportFormDialogRef.value.show('add');
}

const onEdit = row => {
  row.isEdit = true;
}

const onSave = row => {
  delete row.isEdit;
  ElMessage.success('保存成功')
}

const onDelete = row => {
  
}

const getData = item => {
  Object.assign(currParent, item);
  onSearch();
}

const onSearch = () => {
  pagination.currentPage = 1;
  getList();
}

const onReset = () => {
  Object.assign(tableSearch, {})
  onSearch();
}

const getList = async () => {
  console.log('getTableList');
  try {
    const res = await issuedApi.tableList({});
    Object.assign(tableData, res.data.records);
    pagination.total = res.data.total;
  } catch (error) {
    console.error(error);
  }
}

const onSizeChange = value => {
  pagination.currentPage = 1;
  pagination.pageSize = value;
  getList();
}

const onCurrentChange = value => {
  pagination.currentPage = value;
  getList();
}

defineExpose({ getData })
</script>

<style lang="scss" scoped>
@use '@/styles/components/tableList.scss';
</style>